<!--  -->
<template>
  <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
  <table-index :table="table" :rowKey="`id`" @loadData="loadData">
    <template #table-summary>
      <div class="table-info">
        <div class="table-info-item"> 运维总支出：{{ table.pagination.pageCount || 0 }} </div>
        <span class="table-info-item"> 账单总数：{{ table.pagination.pageCount || 0 }} </span>
        <span class="table-info-item"> 账单总数：{{ table.pagination.pageCount || 0 }} </span>
        <span class="table-info-item"> 实收金额：{{ objectFieldInfo?.payAmount || 0 }} </span>
      </div>
    </template>
    <template #aa="{ record }">
      <div class="car-msg">
        <div class="car-msg-left">
          <div class="col-text col-lic"> {{ record.licenseNo || '-' }} </div>
          <div class="col-text"> {{ record.modelName || '-' }} </div>
        </div>
      </div>
    </template>
    <template #relationNum="{ record }">
      <a-button type="text" @click="toRelationDetail(record)">{{ record.orderNo }}交车人:{{ record.giveStaffName }}</a-button>
    </template>
  </table-index>
</template>

<script setup name="MaintenanceList">
  import { reactive, computed } from 'vue'
  // import {  } from '@/api/asset/maintenance'
  import { getMaintenanceList } from '@/api/workplace.js'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { useExport } from '@/hooks/list'
  import { cloneDeep } from 'lodash-es'
  import useNavigate from '@/hooks/useNavigate'
  const { navigateTo } = useNavigate()
  // dateTime Attrs
  const searchList = computed(() => {
    return [
      {
        label: '车牌号',
        prop: 'searchLicenseNo',
        type: 'a-input',
      },
      {
        label: '运维类型',
        prop: 'siteIdList',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'multiple_site_listBystaff',
        },
      },
      {
        label: '账单门店',
        prop: 'siteIdList',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'multiple_site_listBystaff',
        },
      },
      {
        label: '业务单信息',
        prop: 'searchLicenseNo',
        type: 'a-input',
      },
      {
        label: '供应商',
        prop: 'siteIdList',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'multiple_site_listBystaff',
        },
      },
      {
        label: '负责人',
        prop: 'siteIdList',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'multiple_site_listBystaff',
        },
      },
      {
        label: '运维周期',
        prop: 'startTimeRange',
        type: 'i-range-picker',
        attrs: {
          showTime: true,
          timePickerProps: {
            defaultValue: ['00:00:00', '23:59:59'],
          },
        },
        change: (value = []) => {
          queryParam.startTimeBegin = value[0]
          queryParam.startTimeEnd = value[1]
        },
      },
    ]
  })
  const defaultQueryParam = {
    // 运维周期
    startTimeRange: [],
  }
  // 定义 queryParam
  const queryParam = reactive({
    ...cloneDeep(defaultQueryParam),
  })
  // 待处理 - table 配置
  const table = useTable({
    tableHeight: '60vh',
    columns: [
      { title: '运维类型', dataIndex: 'carInfo' },
      { title: '业务单信息', dataIndex: 'siteName' },
      { title: '车辆信息', dataIndex: 'aa', slotName: 'aa' },
      { title: '关联单号', dataIndex: 'relationNum', slotName: 'relationNum' },
      { title: '供应商信息', dataIndex: 'exportMileage' },
      { title: '负责人', dataIndex: 'exportDate' },
      { title: '运维周期', dataIndex: 'warningTime' },
      { title: '账单门店', dataIndex: 'mileage' },
      { title: '费用金额(元)', dataIndex: 'exportMileage' },
      { title: '待结金额(元)', dataIndex: 'exportDate' },
      { title: '当前状态', dataIndex: 'warningTime' },
      { title: '备注', dataIndex: 'warningTime' },
    ],
    operates: [
      {
        label: '详情',
        permission: '',
        method: (record) => {
          navigateTo(`/maintenance-info/detail/${record.id}`, `${record.orderCode}-账单详情`)
        },
      },
    ],
    buttons: [
      {
        mode: 'import',
        label: '导出',
        permission: '',
        method: () => handleExport(),
      },
    ],
  })
  // 导出事件
  const handleExport = () => {
    useExport(depositExportExcel, queryParam)
  }
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getMaintenanceList)
  // 关联订单详情页
  const toRelationDetail = (record) => {}
</script>

<style lang="less" scoped></style>
